<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://"
          + request.getServerName() + ":" + request.getServerPort()
          + path;
  request.setAttribute("basePath", basePath);
%>

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Chart图表</title>
<base href="${basePath}/static/admin/">
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="后台模板,后台管理系统,HTML模板">
<meta name="description" content="基于Bootstrap的后台管理系统模板">
<meta name="author" content="www.bootstrapmb.com">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/fonts.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
  
<body>
  <main class="ftdms-layout-content">

    <div class="container-fluid" style="margin-bottom:90px;">
      <button type="button" class="btn btn-success" onclick="chartOne()">饼状图显示</button>
      <button type="button" class="btn btn-success" onclick="chartTwo()">柱状图显示</button>
    </div>
    <%--饼状图显示--%>
    <div id="main1" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>
    <%--柱状图显示--%>
    <div id="main2" style="margin-left: 50px;height: 600px;width: 600px;float:left;"></div>

  </main>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script>
  function chartOne(){
    $.post("../../admin/chartfirst.action",{},function (date){
      var chartDom = document.getElementById('main1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: 'pie',
            data:date
          }
        ]
      };
      option && myChart.setOption(option);
    });
  }

  function chartTwo(){
    $.post("../../admin/chartsecode.action",function (date){
      var chartDom = document.getElementById('main2');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          data: date.names
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            data: date.values
          }
        ]
      };
      option && myChart.setOption(option);
    });
  }


</script>


</body>
</html>